<div>
  <.form
    :let={f}
    id="conn_form"
    for={@changeset}
    phx-change="validate"
    class="bg-white rounded"
    phx-submit="connect"
    phx-target={@myself}
  >
    <div class="my-4">
      <%= label(f, :enable_broadcast, class: "block text-gray-700 text-sm font-bold mb-2") %>
      <%= checkbox(f, :enable_broadcast, disabled: true, class: "
                    disabled:opacity-50
                    my-1
                    block
                    rounded-md
                    border-gray-300
                    shadow-sm
                    focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
                  ") %>
      <%= error_tag(f, :enable_broadcast) %>
      <p class="text-gray-600 text-xs italic">
        Broadcast is always enabled when successfully connected to a Channel
      </p>
    </div>
    <div class="mb-4">
      <%= label(f, :enable_presence, class: "block text-gray-700 text-sm font-bold mb-2") %>
      <%= checkbox(f, :enable_presence, class: "
                    my-1
                    block
                    rounded-md
                    border-gray-300
                    shadow-sm
                    focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
                  ") %>
      <%= error_tag(f, :enable_presence) %>
      <p class="text-gray-600 text-xs italic">Enable Presence on this Channel</p>
    </div>
    <div class="mb-4">
      <%= label(f, :enable_db_changes, class: "block text-gray-700 text-sm font-bold mb-2") %>
      <%= checkbox(f, :enable_db_changes, class: "
                    my-1
                    block
                    rounded-md
                    border-gray-300
                    shadow-sm
                    focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
                  ") %>
      <%= error_tag(f, :enable_db_changes) %>
      <p class="text-gray-600 text-xs italic">Enable Database Changes on this Channel</p>
    </div>
    <div class="mb-4">
      <%= label(f, :private_channel, class: "block text-gray-700 text-sm font-bold mb-2") %>
      <%= checkbox(f, :private_channel, class: "
                    my-1
                    block
                    rounded-md
                    border-gray-300
                    shadow-sm
                    focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
                  ") %>
      <%= error_tag(f, :private_channel) %>
      <p class="text-gray-600 text-xs italic">Is it using a channel?</p>
    </div>
    <div class="mb-4">
      <%= label(f, :project, class: "block text-gray-700 text-sm font-bold mb-2") %>
      <%= text_input(f, :project, placeholder: "project_ref", class: "
                    my-1
                    block
                    w-full
                    rounded-md
                    border-gray-300
                    shadow-sm
                    focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
                  ") %>
      <%= error_tag(f, :project) %>
      <p class="text-gray-600 text-xs italic">Supabase platform project `Reference ID` or...</p>
    </div>
    <div class="mb-4">
      <%= label(f, :host, class: "block text-gray-700 text-sm font-bold mb-2") %>
      <%= text_input(f, :host, placeholder: "https://project_ref.supabase.co", class: "
                    my-1
                    block
                    w-full
                    rounded-md
                    border-gray-300
                    shadow-sm
                    focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
                  ") %>
      <%= error_tag(f, :host) %>
      <p class="text-gray-600 text-xs italic">The host to connect to</p>
    </div>
    <div class="mb-4">
      <%= label(f, :channel, class: "block text-gray-700 text-sm font-bold mb-2") %>
      <%= text_input(f, :channel, placeholder: "room_a", class: "
                    my-1
                    block
                    w-full
                    rounded-md
                    border-gray-300
                    shadow-sm
                    focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
                  ") %>
      <%= error_tag(f, :channel) %>
      <p class="text-gray-600 text-xs italic">The Channel to connect to</p>
    </div>
    <div class="mb-4">
      <%= label(f, :schema, class: "block text-gray-700 text-sm font-bold mb-2") %>
      <%= text_input(f, :schema, placeholder: "public", class: "
                    my-1
                    block
                    w-full
                    rounded-md
                    border-gray-300
                    shadow-sm
                    focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
                  ") %>
      <%= error_tag(f, :schema) %>
      <p class="text-gray-600 text-xs italic">Listen to changes from tables in this schema</p>
    </div>
    <div class="mb-4">
      <%= label(f, :table, class: "block text-gray-700 text-sm font-bold mb-2") %>
      <%= text_input(f, :table, placeholder: "*", class: "
                    my-1
                    block
                    w-full
                    rounded-md
                    border-gray-300
                    shadow-sm
                    focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
                  ") %>
      <%= error_tag(f, :table) %>
      <p class="text-gray-600 text-xs italic">Listen to changes from this table</p>
    </div>
    <div class="mb-4">
      <%= label(f, :filter, class: "block text-gray-700 text-sm font-bold mb-2") %>
      <%= text_input(f, :filter, placeholder: "body=eq.hey", class: "
                    my-1
                    block
                    w-full
                    rounded-md
                    border-gray-300
                    shadow-sm
                    focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
                  ") %>
      <%= error_tag(f, :filter) %>
      <p class="text-gray-600 text-xs italic">Match records with a filter</p>
    </div>
    <div class="mb-4">
      <%= label(f, :log_level, class: "block text-gray-700 text-sm font-bold mb-2") %>
      <%= select(f, :log_level, ["debug", "info", "warning", "error"], selected: "info", class: "
                    my-1
                    block
                    w-full
                    rounded-md
                    border-gray-300
                    shadow-sm
                    focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
                  ") %>
      <%= error_tag(f, :log_level) %>
      <p class="text-gray-600 text-xs italic">Set the backend log level for this connection</p>
    </div>
    <div class="mb-4">
      <%= label(f, :token, class: "block text-gray-700 text-sm font-bold mb-2") %>
      <%= text_input(f, :token, value: Ecto.Changeset.get_field(@changeset, :token), class: "
                    my-1
                    block
                    w-full
                    rounded-md
                    border-gray-300
                    shadow-sm
                    focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
                  ") %>
      <%= error_tag(f, :token) %>
      <p class="text-gray-600 text-xs italic">Your Supabase `anon` or `service_role` key</p>
    </div>
    <div class="mb-4">
      <%= label(f, :bearer, class: "block text-gray-700 text-sm font-bold mb-2") %>
      <%= text_input(f, :bearer, value: Ecto.Changeset.get_field(@changeset, :bearer), class: "
                    my-1
                    block
                    w-full
                    rounded-md
                    border-gray-300
                    shadow-sm
                    focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
                  ") %>
      <%= error_tag(f, :bearer) %>
      <p class="text-gray-600 text-xs italic">
        An Auth user JWT optionally signed with custom claims
      </p>
    </div>
    <div class="flex flex-row justify-between items-center py-6">
      <div>
        <%= submit(@subscribed_state,
          class: "bg-green-600 hover:bg-green-500 text-white font-bold py-2 px-4 rounded focus:outline-none"
        ) %>
      </div>
      <div>
        <.gray_link_button phx-click="clear_local_storage" phx-target={@myself}>
          Reset
        </.gray_link_button>
      </div>
    </div>
  </.form>
</div>
